import React from "react";
import { Tabs, Form, Input, Button, Card, Avatar, Row, Col } from "antd";
import "./index.less";

const { TabPane } = Tabs;

const Pg3: React.FC = () => {
  return (
    <Row className="pg3-container" gutter={16} data-oid="d:o13fz">
      <Col span={6} data-oid="407dw:4">
        <div className="pg3-process" data-oid="943rcak">
          <h3 data-oid=".fuatcy">
            审批进程{" "}
            <a className="pg3-process-link" href="#" data-oid="fivbsi7">
              查看完整流程图
            </a>
          </h3>
          <div className="pg3-process-item" data-oid="8fa-_uz">
            <Avatar src="user-icon.png" data-oid="27fejxd" />
            <span data-oid="-s_oke2">发起审批</span>
          </div>
          <div className="pg3-process-item" data-oid="npmga3e">
            <Avatar src="user-icon.png" data-oid="3f84xyl" />
            <span data-oid="2rqaqls">项目负责人审批</span>
          </div>
        </div>
      </Col>
      <Col span={18} data-oid="2lvu2bo">
        <div className="pg3-content" data-oid="vf:oxyh">
          <h1 data-oid="yale7-2">项目需求内容变更</h1>

          <Tabs defaultActiveKey="1" data-oid="7jmudy_">
            <TabPane tab="变更信息" key="1" data-oid="fy0pd8r">
              <Card className="pg3-card" data-oid="02wium.">
                <h2 data-oid="ng9m26t">特性信息</h2>
                <Form
                  layout="horizontal"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 18 }}
                  data-oid="9e:k45z"
                >
                  <Row gutter={16} data-oid="6tm1wll">
                    <Col span={12} data-oid="gz_fcsl">
                      <Form.Item label="特性名称" data-oid="o-bj4fp">
                        <Input
                          disabled
                          defaultValue="东方国际"
                          data-oid="ty4a9tq"
                        />
                      </Form.Item>
                    </Col>
                    <Col span={12} data-oid="b:jip4p">
                      <Form.Item label="特性编号" data-oid="6hz4bed">
                        <Input
                          disabled
                          defaultValue="IT990946-F8268695589"
                          data-oid="aih3p_b"
                        />
                      </Form.Item>
                    </Col>
                    <Col span={12} data-oid="1foa7bb">
                      <Form.Item label="所属专题" data-oid="9n24w6e">
                        <Input
                          disabled
                          defaultValue="专题特性送审测试"
                          data-oid="z-9bjve"
                        />
                      </Form.Item>
                    </Col>
                    <Col span={12} data-oid="4dbsq4u">
                      <Form.Item label="所属专题编号" data-oid="-3b_dok">
                        <Input
                          disabled
                          defaultValue="IT990946-E153"
                          data-oid="5lenwe1"
                        />
                      </Form.Item>
                    </Col>
                    <Col span={24} data-oid="70.p818">
                      <Form.Item label="特性负责人" data-oid="ts65vtw">
                        <Input
                          disabled
                          defaultValue="伍留/80293464"
                          data-oid=".6twxjg"
                        />
                      </Form.Item>
                    </Col>
                  </Row>
                </Form>
              </Card>

              <Card className="pg3-card" data-oid="5zq5cee">
                <h2 data-oid="pt-0qpl">变更说明</h2>
                <Form
                  layout="horizontal"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 18 }}
                  data-oid="alx1qis"
                >
                  <Form.Item label="变更原因" data-oid="vngvmvu">
                    <Input disabled defaultValue="其他" data-oid="c8hf8o_" />
                  </Form.Item>
                  <Form.Item label="变更说明" data-oid="-0t9g_5">
                    <Input.TextArea
                      disabled
                      rows={4}
                      defaultValue="1212"
                      data-oid="9rf2z2u"
                    />
                  </Form.Item>
                  <Form.Item label="变更文档" data-oid=":h.z3m3">
                    <div className="pg3-upload" data-oid=":q.mwfa">
                      无
                    </div>
                  </Form.Item>
                </Form>
              </Card>

              <div className="pg3-actions" data-oid="rnd_uow">
                <Button data-oid="xz9ufvz">关闭</Button>
                <Button data-oid="2fufemo">保存</Button>
                <Button type="primary" danger data-oid="y58v5-f">
                  拒绝
                </Button>
                <Button type="primary" data-oid="pgumjom">
                  同意
                </Button>
              </div>
            </TabPane>
            <TabPane tab="信息通知" key="2" data-oid="iqclg1x">
              <Card className="pg3-card" data-oid=".6turh5">
                <h2 data-oid="0kig3dk">通知记录</h2>
                <div className="pg3-notification-list" data-oid="scycira">
                  <div className="pg3-notification-item" data-oid="h:ztx_p">
                    <div className="pg3-notification-time" data-oid="n3lcu8-">
                      2024-03-21 10:00
                    </div>
                    <div
                      className="pg3-notification-content"
                      data-oid="lpx.79c"
                    >
                      系统已通知项目负责人进行审批
                    </div>
                  </div>
                </div>
              </Card>
            </TabPane>
          </Tabs>
        </div>
      </Col>
    </Row>
  );
};

export default Pg3;
